<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>教师中心</title>
	<!-- <script>
		if (self == top) location.replace('/wechat/footer_wx.html?href=' +
			encodeURIComponent(location.href.substr(location.origin.length)));
	</script> -->
	<link rel="stylesheet" href="css/teacher_home.css">
	<link rel="stylesheet" href="css/head.css">
	<style scoped>
		#app {
			background-color: #f9f9f9;
		}

		[v-cloak] {
			display: none;
		}

		.return {
			float: left;
			margin-top: -30px;
			margin-left: 5%;
			position: relative;
			height: 20px;
		}

		.mask_item_title {
			padding: 10px;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			font-family: 黑体;
		}

		.mask_item_content {
			width: 80%;
			margin: 0 auto;
			border: 1px solid #999;
			border-radius: 6px;
			overflow: hidden;
		}

		.mask_item_content_th {
			color: white;
			display: flex;
			font-size: 14px;
			justify-content: space-between;
			background: linear-gradient(to bottom, #4eaaf8, #117afd);
		}

		.mask_item_content_tb {
			display: flex;
			font-size: 14px;
			justify-content: space-between;
		}

		.mask_item_content_th_tr,
		.mask_item_content_tb_tr {
			width: 50%;
			text-align: center;
			padding: 10px;
			border-bottom: 1px solid #bfbfbf;
		}

		.borderRight {
			border-right: 1px solid #bfbfbf;
		}

		.mask_item_content_tb:last-child .mask_item_content_tb_tr {
			border-bottom: none;
		}

		.cancel {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			position: absolute;
			top: -14px;
			right: -6px;
			background-image: url('../image/img/quxiao2.png');
			background-size: 100% 100%;
			background-color: white;
		}

		.div_student {
			height: 120px;
		}

		.div_student_item {
			padding: 35px 20px;
			width: 95%;
		}

		.upload-box {
			width: 100px;
			height: 100px;
			border: 2px dashed #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			position: relative;
		}

		.upload-box img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.upload-box input[type="file"] {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}

		.div_course {
			margin-top: 85px;
			padding: 10px;
			border-radius: 4px;
		}

		.course_item1 {
			width: 28%;
			margin-bottom: 10px;
			padding: 6px 11px;
			text-align: center;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			background: linear-gradient(136deg, #ffc526, #ffa248);
		}

		.courses_container {
			border: 1px solid #ccc;
			margin-top: -10px;
			border-radius: 5px;
			background-color: white;
		}

		.stuqiandao {
			padding: 10px;
			border-radius: 4px;
		}

		.ooo {
			display: flex;
			flex-wrap: wrap;
			padding: 0 15px;
			box-sizing: border-box;
			margin-top: 20px;
			height: 82px;
			overflow: auto;
		}

		.ddd {
			padding: 10px;
			border-radius: 8px;
			border: 1px solid #ccc;
			background-color: white;
		}

		.course_item {
			width: 20%;
			box-sizing: border-box;
			margin-bottom: 10px;
			padding: 5px 8px;
			border-radius: 4px;
			background: linear-gradient(136deg, #9f9d9b, #c7c6c5);
			text-align: center;
			color: white;
			margin-right: 6.5%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.course_item:nth-child(4n) {
			margin-right: 0px;
		}

		.note_box {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-top: 5px;
			padding-bottom: 10px;
			font-size: 13px;
			letter-spacing: 2px;
			color: #999;
		}

		.num_box {
			display: flex;
			justify-content: space-between;
			padding: 5px;
			border-radius: 4px;
			margin-top: 4px;
		}

		.num_box_item {
			flex: 1;
			text-align: center;
		}

		.num_box_item span {
			display: block;
			font-size: 24px;
			font-weight: bold;
			margin-top: 5px;
		}

		.list_box {
			width: 96%;
			max-height: 23vh;
			min-height: 10vh;
			display: flex;
			flex-wrap: wrap;
			overflow: auto;
			margin: 0px auto 10px auto;
		}

		.list_item {
			width: 23%;
			text-align: center;
			height: 32px;
			line-height: 32px;
			font-size: 16px;
			font-weight: bold;
			color: #39a5ff;
			border: 1px solid #55b1fe;
			border-radius: 60px;
			background: linear-gradient(to bottom, #fefefe, #fdfdfd, #97c9f6);
			margin-top: 10px;
			margin-right: 1.7%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.list_item:nth-child(4n) {
			margin-right: 0;
		}

		.list_item_red {
			color: #ea5c4a;
			border: 1px solid #ea5c4a;
			background: linear-gradient(to bottom, #fefefe, #fdfdfd, #ff8676);
		}

		.zhushi {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10px;
			color: gray;
			font-size: 13px;
			text-align: center;
			letter-spacing: 2px;
		}

		.course_item.current {
			background: linear-gradient(136deg, #39a5ff, #117afd);
		}

		.jjj {
			color: red;
			margin-right: 5px;
			/* 添加右边距来分隔符号和文本 */
		}

		.nulldata {
			text-align: center;
			color: gray;
			padding: 20px;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="header">
			<div class="header_title">人脸打卡</div>
			<img src="../image/return.png" alt="" class="return" onclick="history.back()">
		</div>

		<div class="div_student">
			<div class="div_student_item">
				<div class="upload-box">
					<input type="file" ref="fileInput" @change="handleFileChange" />
					<img :src="teacher.avatar " v-if="teacher.avatar" />
					<img src="../image/renlianshangc.png" v-else />
				</div>

				<div class="div_student_ritht">
					<div class="div_student_ritht_head">
						姓名：
						<span style="font-size: 18px;font-weight: 600;" v-text="teacher.studentName"></span>
					</div>
					<div class="div_student_ritht_item">
						班级：
						<div v-text="teacher.classesName" style="font-size: 16px"></div>
					</div>
					<div class="div_student_ritht_item">
						课程：
						<div v-text="teacher.courseName" style="font-size: 16px"></div>
					</div>
					<div class="div_student_ritht_item">
						<div>
							<label for="status">选择状态:</label>
							<select id="status" v-model="teacher.status">
								<option :value="0">签到</option>
								<option :value="1">签退</option>
							</select>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="div_course">
			<div class="course_item1"><span style="color: white;">当前时段课程</span></div>
			<div class="courses_container">
				<div class="ooo">
					<div class="course_item" 
     :class="{ current: isCurrentCourse(course.id) }"
     v-for="course in coursesList" :key="course.id">
  {{ course.name }}
</div>

				</div>
				<div class="note_box">
					<div class="PPP" style="color: red;">*</div>蓝色是当前时段课程，灰色是还未上课程
				</div>
			</div>
		</div>
		<!-- 学生签到情况 -->
		<div class="stuqiandao">
			<div class="ddd">
				<div class="a" style="color:  #ffa248">学生签到情况</div>
				<div class="num_box">
					<div class="num_box_item">
						班级总人数<span>{{studentList.length+studentList2.length}}</span>
					</div>
					<div class="num_box_item">
						已签到人数<span>{{studentList.length }}</span>
					</div>
					<div class="num_box_item">
						未签到人数<span>{{studentList2.length}}</span>
					</div>
				</div>
				<div class="list_box" v-if="studentList.length || studentList2.length">
					<div class="list_item" v-for="item in studentList">
						{{ item }}
					</div>
					<div class="list_item list_item_red" v-for="item in studentList2">
						{{ item }}
					</div>

				</div>
				<div class="list_box" v-else>
					<div class="nulldata">
						暂无内容
					</div>
				</div>
				<div class="zhushi">
					<div class="jjj">*</div>蓝色是已签到人数，红色是未签到人数。
				</div>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/wechat/js/wx.js"></script>
	<script src="/js/common.js"></script>
	<script>
		var agentId = localStorage.getItem('agentId')
		new Vue({
  el: '#app',
  data: {
    teacher: {
      avatar: null,
      courseName: null,
      studentName: null,
      classesName: null,
      status: 0
    },
    schoolId: getPerson().schoolId,
    coursesList: [],
    currentCourseIds: [], // ✅ 修改点：支持多个当前课程
    lessonTimeIds: [],    // ✅ 多个课程时段
    studentList: [],
    studentList2: []
  },
  created: function () {
    this.getCourses();
  },
  methods: {
    isCurrentCourse(courseId) {
      return this.currentCourseIds.includes(courseId);
    },
    shijianchuo(time) {
      const [hours, minutes] = time.split(':');
      const date = new Date();
      date.setHours(hours);
      date.setMinutes(minutes);
      date.setSeconds(0);
      date.setMilliseconds(0);
      return date.getTime();
    },
    getCourses() {
      axios.get('/t/course/list/' + agentId )
        .then(response => {
          this.coursesList = response.data.list;
          const classesIdList = JSON.parse(localStorage.getItem('classesIdList'));
          const day = dayjs().format('YYYY-MM-DD');
          const time = dayjs().format('HH:mm');
          this.currentCourseIds = []; // ✅ 清空旧数据
          this.lessonTimeIds = [];

          for (let index = 0; index < classesIdList.length; index++) {
            const element = classesIdList[index];
            axios.get('/api/attendanceRecord/getCourse/' + element).then(({ data }) => {
              if (!data) return;
              const dayData = data[day] || [];
              for (let i = 0; i < dayData.length; i++) {
                const start = this.shijianchuo(dayData[i].startTime) - 15 * 60 * 1000;
                const end = this.shijianchuo(dayData[i].endTime);
                const now = this.shijianchuo(time);
                if (now >= start && now <= end) {
                  const courseId = dayData[i].classesId;
                  const lessonId = dayData[i].id;
                  if (!this.currentCourseIds.includes(courseId)) {
                    this.currentCourseIds.push(courseId);
                    this.lessonTimeIds.push(lessonId);
                    this.getStudents(lessonId); // ✅ 多课程都获取
                  }
                }
              }
            });
          }
        })
        .catch(error => {
          console.error('获取课程失败', error);
        });
    },
    getStudents(lessonTimeId) {
      axios.get('/api/attendanceRecord/getStudents/' + lessonTimeId)
        .then(response => {
          this.studentList.push(...response.data.signedInStudents);
          this.studentList2.push(...response.data.notSignedInStudents);
        });
    },
    handleFileChange(event) {
      if (this.teacher.status == null) {
        alert('请先选择签到状态！');
        return;
      }
      var file = event.target.files[0];
      if (file) {
        const maxSize = 5 * 1024 * 1024;
        if (file.size > maxSize) {
          alert('文件大小不能超过5MB!');
          return;
        }
        const timestamp = new Date().getTime();
        const fileExtension = file.name.split('.').pop();
        const newFileName = `image_${timestamp}.${fileExtension}`;
        const newFile = new File([file], newFileName, { type: file.type });
        const formData = new FormData();
        formData.append('file', newFile);
        formData.append("lessonTimeIds", this.lessonTimeIds.join(',')); // ✅ 多个 lessonTimeId
        formData.append("status1", this.teacher.status);

        axios.post('/api/attendanceRecord/renlian/' + this.schoolId, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          if (response.data.code == 0) {
            this.teacher.courseName = response.data.data.courseName;
            this.teacher.studentName = response.data.data.studentName;
            this.teacher.classesName = response.data.data.classesName;
            this.teacher.status = response.data.data.status;
            this.teacher.avatar = response.data.data.pic;
            this.getCourses(); // 重新获取课程状态
          } else {
            alert(response.data.msg);
          }
        }).catch(error => {
          console.error(error);
        });
      }
    }
  }
});

	</script>
</body>

</html>